<template>
  <div element-loading-text="认证中，请稍后...">
    <el-form :model="userInfo" label-width="150px">
      <el-form-item label="城市" prop="city" :rules="[{ required: true, message: '城市不能为空' }]">
        <el-select v-model="userInfo.city" filterable placeholder="请选择" clearable>
          <el-option v-for="item in cityOptions" :key="item.code" :label="item.city" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品牌" prop="shopShortName" :rules="[{ required: true, message: '品牌不能为空' }]">
        <el-input v-model="userInfo.shopShortName"></el-input>
      </el-form-item>
      <el-form-item label="门店" prop="storeName" :rules="[{ required: true, message: '门店不能为空' }]">
        <el-input v-model="userInfo.storeName"></el-input>
      </el-form-item>
      <el-form-item label="门店地址" prop="storeAddr" :rules="[{ required: true, message: '门店地址不能为空' }]">
        <el-input v-model="userInfo.storeAddr"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="!submitAble">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import CITYS from "@/utils/config/citys";

export default {
  components: {},
  props: {},
  data() {
    return {
      cityOptions: [],
      userInfo: {
        city: "", // 城市
        shopShortName: "", // 品牌
        storeName: "", // 门店
        storeAddr: "", // 门店地址
      },
    };
  },
  created() {
    this.cityOptions = CITYS.map((item) => {
      return { ...item, value: item.city.replace("市", "") };
    });
    for (var i in this.cityOptions) {
      if (this.cityOptions[i].city === "上海市") {
        this.userInfo.city = this.cityOptions[i].city;
      }
    }
  },
  mounted() {},
  watch: {},
  computed: {
    submitAble() {
      return Object.values(this.userInfo).every((v) => !!v);
    },
  },
  methods: {
    submitForm() {
      this.$emit("oncreateshop", this.userInfo);
      this.close();
    },
    close() {
      this.$emit("onclose");
    },
  },
};
</script>
<style></style>
